<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>DZ exhibition -- Order print page</title>
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="scripts/ext/adapter/ext-base.js">
        </script>
        <link rel="stylesheet" type="text/css" href="styles/dzbase.css" />
		<link rel="stylesheet" type="text/css" href="styles/summary.css" />
        <script type="text/javascript" src="scripts/ext/ext-all.js">
        </script>
		<script type="text/javascript" src="scripts/ext/GroupSummary.js"></script>
        <script type="text/javascript" src="scripts/utils.js">
        </script>
        <script type="text/javascript" src="scripts/i18nMessage.js">
        </script>
        <script type="text/javascript">
        	var idValue = getPrarmeterValue(window.location, 'id');
        	var orderXmlLoader = new xmlLoader('OrderServlet?action=3&id=' + idValue);
			
			var orderStore = new Ext.data.Store({
		                    reader: new Ext.data.XmlReader({
				                        record: 'item',
				                        id: 'id'
				                    }, [ 'index', 'reference', 'needleType', 'color', 'weight', 'yarn', 
						                'amount', 'processPrice', 'diffCoefficient', 'yarnPrice', {name: 'totalPrice', type: 'float', map: 'totalPrice'}, {name: 'payment1', type: 'float', map: 'payment1'},
                    {name: 'payment2', type: 'float', map: 'payment2'},'customerName', 
						                'customerLinkman', 'customerAddress', 'isPrinted', 'isConfirmed', 'photoName', 'comment', 
						                'customerComment', 'customerEmail', 'customerTel', 'customerMb', 'id']),
							data: orderXmlLoader.getXml()
	         });
        	Ext.onReady(function(){
                Ext.QuickTips.init();
                
                // turn on validation errors beside the field globally
                Ext.form.Field.prototype.msgTarget = 'side';
                
					//alert(orderStore.getAt(0).data.customerComment);
                	 var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td colspan="6"><b>Customer Information</b></td></tr>',
							'<tr><td style="background:#eeeeee; width: 20%;"><i>Customer name</i></td>',
							'<td>{customerName}</td>',
							'<td style="background:#eeeeee; width: 20%;"><i>Contact man</i></td>',
							'<td>{customerLinkman}</td>',
							'<td style="background:#eeeeee; width: 20%;"><i>Tel</i></td>',
							'<td>{customerTel}</td></tr>',
							
							'<tr><td style="background:#eeeeee; width: 20%;"><i>Mobile</i></td>',
							'<td>{customerMb}</td>',
							'<td style="background:#eeeeee; width: 20%;"><i>Email</i></td>',
							'<td colspan="3">{customerEmail}</td></tr>',
							
							'<tr><td style="background:#eeeeee; width: 20%;"><i>Address</i></td>',
							'<td colspan="5">{customerAddress}</tr>',
							
							'<tr><td style="background:#eeeeee; width: 20%;"><i>Comment</i></td>',
							'<td colspan="5">{customerComment}</tr>',
							
							'<tr><td colspan="6"><b>Design Zone Information</b></td></tr>',
							'<tr><td style="background:#eeeeee; width: 20%;"><i>Information</i></td>',
							'<td colspan="5">Here is some Design Zone information.(Please write it)</tr>',
							'<tr><td colspan="6"><b>Invoice & payment</b></td></tr>',
							'<tr><td style="background:#eeeeee; width: 20%;"><i>Total invoice</i></td>',
							'<td>{totalPrice:usMoney}</td><td style="background:#eeeeee; width: 20%;"><i>30% at order to confirm</i></td>',
							'<td>{payment1:usMoney}</td><td style="background:#eeeeee; width: 20%;"><i>70% 10 days before departure</i></td>',
							'<td>{payment2:usMoney}</td></tr>',
							
						'</tbody></table><div id="orderItemList" style="margin-top: 6px;"></div>'
					];
                    var itemTpl = new Ext.Template(itemTplMarkup);
                    itemTpl.overwrite('orderItem', orderStore.getAt(0).data);
               	
               		if(orderStore.getAt(0).data.isConfirmed == 1){
                   	 	document.getElementById('confirmImg').src = 'images/icons/tick.png';
                   	 	document.getElementById('confirmImg').title = 'Yes';
                    }else{
                    	document.getElementById('confirmImg').src = 'images/icons/cross.png';
                   	 	document.getElementById('confirmImg').title = 'No';
                    }
                    
                    if(orderStore.getAt(0).data.isPrinted == 1){
                   	 	document.getElementById('printImg').src = 'images/icons/tick.png';
                   	 	document.getElementById('printImg').title = 'Yes';
                    }else{
                    	document.getElementById('printImg').src = 'images/icons/cross.png';
                   	 	document.getElementById('printImg').title = 'No';
                    }
                    
                    
                    var summary = new Ext.grid.GroupSummary(); 
				
                	var orderItemStore = new Ext.data.GroupingStore({
                
	                    url: 'OrderServlet?action=15&id=' + idValue,
	                    
	                    reader: new Ext.data.XmlReader({
	                    
	                        record: 'item',
	                        id: 'id',
	                        totalRecords: 'itemTotal'
	                    }, ['index', 'id', 'color', {
							name: 'quantity',
							type: 'int'
						}, {
							name: 'unitPrice',
							type: 'float'
						},{
							name: 'totalPrice',
							type: 'float'
						},{
							name: 'weight',
							type: 'float'
						},{
							name: 'totalWeight',
							type: 'float'
						}, 'technicChart', 'yarn']),
	                    
	                    groupField: 'technicChart',
	                    sortInfo: {
	                        field: 'technicChart',
	                        direction: "ASC"
	                    }
	                });
                
	                 var orderItemGrid = new Ext.grid.GridPanel({
	                    title: 'Order item list',
	                    store: orderItemStore,
	                    stripeRows: true,
	                    //height: 360,
	                    autoHeight:true,
	                    columns: [{
                        id: 'technicChart',
                        header: 'Technic chart',
                        dataIndex: 'technicChart'
                    }, {
                        header: 'Yarn',
                        dataIndex: 'yarn',
						summaryType: 'count',
						summaryRenderer: function(v, params, data){
		                    return ((v === 0 || v > 1) ? '(' + v +' Order items)' : '(1 Order item)');
		                }
                    },{
						header: 'Unit price',
						dataIndex: 'unitPrice',
						align: 'right',
						renderer: eurMoney
					},{
                        header: 'Quantity',
                        dataIndex: 'quantity',
						align: 'right',
						summaryType:'sum'
                    },{
                        header: 'Cost',
						align: 'right',
                        dataIndex: 'totalPrice',
						groupable: false,
						renderer: eurMoney,
						summaryType:'sum'
                    }],
                    
	                    view: new Ext.grid.GroupingView({
	                        forceFit: true,
							hideGroupedColumn: true,
	                        groupTextTpl: '{text}({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
	                    }),
	                    loadMask: true,
						plugins: summary,
	                    renderTo: 'orderItemList'
	                });
                
                orderItemStore.load();
			});
        
			function printsetup(){
		　　		wb.execwb(8,1);
		　　	}
		　　	function printpreview(){
		　		　wb.execwb(7,1);　
			}
		
		　　function printit(){
			　　if (confirm('Are you sure that you want to print?')) {
			　　		wb.execwb(6,6)
					Ext.Ajax.request({
	                        url: 'OrderServlet?action=13&id=' + orderStore.getAt(0).data.id,
	                        success: function(o){
	                            if (o.responseText == 'success') {
	                                //messageTip.msg('Tip', 'Print successfully.');
	                                document.getElementById('printImg').src = 'images/icons/tick.png';
	                   	 			document.getElementById('printImg').title = 'Yes';
	                            }
	                            else {
	                                //messageTip.msg('Tip', 'Print unsuccessfully.');
	                                document.getElementById('printImg').src = 'images/icons/cross.png';
	                   	 			document.getElementById('printImg').title = 'No';
	                            }
	                            opener.store.reload();
	                        },
	                        failure: function(o){
	                            //messageTip.msg('Tip', 'Confirm failure.');
	                            document.getElementById('confirmImg').src = 'images/icons/cross.png';
	                   	 		document.getElementById('confirmImg').title = 'No';
	                        },
	                        params: {
	                            foo: 'bar'
	                        }
	                  });
			　　}
　　		   } 

			function orderConfirm(){
				 Ext.Ajax.request({
                        url: 'OrderServlet?action=12&id=' + orderStore.getAt(0).data.id,
                        success: function(o){
                            if (o.responseText == 'success') {
                                messageTip.msg('Tip', 'Confirm successfully.');
                                document.getElementById('confirmImg').src = 'images/icons/tick.png';
                   	 			document.getElementById('confirmImg').title = 'Yes';
                            }
                            else {
                                messageTip.msg('Tip', 'Confirm unsuccessfully.');
                                document.getElementById('confirmImg').src = 'images/icons/cross.png';
                   	 			document.getElementById('confirmImg').title = 'No';
                            }
                            opener.store.reload();
                        },
                        failure: function(o){
                            messageTip.msg('Tip', 'Confirm failure.');
                            document.getElementById('confirmImg').src = 'images/icons/cross.png';
                   	 		document.getElementById('confirmImg').title = 'No';
                        },
                        params: {
                            foo: 'bar'
                        }
                  });
			}
        </script>
</head>
<body>
	<object classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></object> 
	
	<div id="orderItem" style="width: 170mm;margin-top: 10px;">
    </div>
   	<div style="text-align: center;width: 170mm;margin-top: 6px;">
    <input type="button" name="button_print" value="Confirm order information" onclick="javascript:orderConfirm();">&nbsp;<img id="confirmImg" src="images/icons/cross.png" title="No"/><br/>
	<input type="button" name="button_print" value="Print" onclick="javascript:printit()">&nbsp;<img id="printImg" src="images/icons/cross.png" title="No"/>
	<input type="button"　name="button_setup" value="Print page setup" onclick="javascript:printsetup();">
	<input type="button"　name="button_show" value="Print preview" onclick="javascript:printpreview();">
	</div>
</body>
</html>